<template>
  <div id="new_info_v2">
    <c-title :hide="false" :text="$i18n.t('base.myInfo')"></c-title>
    <div class="content">
      <!-- <router-link> -->
      <van-cell is-link @click.native="editUserInformation">
        <template #title>
          <div style="display: flex;">
            <div>
              <img :src="dataList.avatar"
                style="width: 2.5rem; height: 2.5rem; border-radius: 50%;" />
            </div>
            <div style="margin-left: 0.625rem;">
              <div>{{dataList.nickname}}</div>
              <div style="color: #9a9a9a; font-size: 0.75rem; line-height: 1.5rem;">ID:{{dataList.uid}}</div>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell v-if="dataList.mobile!=undefined" :title="$i18n.t('base.phoneNumber') +':'+ dataList.mobile" :is-link="linkMethods" style="margin-top: 0.625rem;" @click.native="bindTel">
        <template #default >
          <span>{{dataList.mobile == ''? $i18n.t('base.complete'):(dataList.change_mobile == 1?$i18n.t('base.edit'):'')}}</span>
        </template>
      </van-cell>

      <van-cell title="切换语言" v-if="fun.getPluginSetting('translation_component.is_open',false)" is-link style="margin-top: 0.625rem;" @click='showLang = true'/>
      <van-popup v-model="showLang" position="bottom" round>
        <van-nav-bar title="切换语言" right-text="关闭" @click-right="showLang = false"/>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell v-for="item in language" :title="item.name" :key="item.id" clickable @click="changeLanguage(item.id)">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-popup>

      <van-cell v-if="dataList.alipay!=undefined" :title="$i18n.t('base.alipay') +':'+ dataList.alipay" is-link :value="dataList.alipay == ''?$i18n.t('base.complete'):$i18n.t('base.edit')" style="margin-top: 0.625rem;" @click='openPopUp("alipay")'/>
      <van-cell v-if="dataList.wechat!=undefined" :title="$i18n.t('base.wechatId') +':'+ dataList.wechat" is-link :value="dataList.wechat == ''?$i18n.t('base.complete'):$i18n.t('base.edit')" style="margin-top: 0.625rem;" @click='openPopUp("weChat")'/>
      <van-cell class="bankCard" :title="dataList.bank_card == null?$i18n.t('base.bankCard') +':':$i18n.t('base.bankCard') +':'+dataList.bank_card" is-link :value="dataList.bank_card == null?$i18n.t('base.complete'):$i18n.t('base.edit')" style="margin-top: 0.625rem;" @click.native="editBank"/>
      <van-cell v-if="showEmail" :title="$i18n.t('base.email')" is-link :value="dataList.email == ''?$i18n.t('base.complete'):$i18n.t('base.edit')" style="margin-top: 0.625rem;" @click='openPopUp("email")'/>
      <van-cell :title="$i18n.t('base.paymentPassword')" is-link value="" style="margin-top: 0.625rem;" v-if="dataList.pay_state" @click.native="paymentCode"/>
      <van-cell title="汇聚结算卡" is-link value="" style="margin-top: 0.625rem;" v-if="dataList.converge_pay" @click.native="convergenceSettlementCard"/>
      <van-cell :title="$i18n.t('base.addressManagement')" is-link value="" style="margin-top: 0.625rem;" @click.native="address"/>
      <van-cell :title="$i18n.t('base.accountDeletion')" is-link value="" style="margin-top: 0.625rem;" v-if="dataList.member_cancel" @click.native="memberCancel"/>
      <van-cell :title="dataList.register_agreement.title" is-link value="" style="margin-top: 0.625rem;" v-if="dataList.register_agreement && dataList.register_agreement.status" @click.native="toUserAgreement"/>
      <van-cell :title="dataList.platform_agreement.title" is-link value="" style="margin-top: 0.625rem;" v-if="dataList.platform_agreement && dataList.platform_agreement.status" @click.native="openPlatformAgreement = true"/>
    </div>
    <div class="foot" v-if="checkShowButton()">
      <van-button type="primary" :round="true" @click="outInfo()" :style="cssVars">{{ $i18n.t('base.logout') }}</van-button>
    </div>
    <van-action-sheet v-model="show">
      <div class="head">
        <div class="cancel" @click="show = false">{{ $i18n.t('base.cancel') }}</div>
        <div class="title">{{popUpTitle}}</div>
        <div class="confirm" @click="confirm">{{ $i18n.t('base.confirm') }}</div>
      </div>
    </van-action-sheet>
    <!-- 底部弹窗-->
    <popUp ref="popUp"></popUp>
    <!-- 平台协议弹窗-->
    <van-popup v-model="openPlatformAgreement" style="border-radius: 0.656rem;">
      <div class="city-info">
        <van-nav-bar :title="platformAgreement.title" fixed />
        <div style="height: 2.5rem; clear: both;"></div>
        <div id="a_content" v-html="platformAgreement.content"></div>
        <div
          style="width: 12.75rem;
            height: 2.313rem;
            background-color: #f04d4d;
            border-radius: 0.188rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.193rem;
            margin: 0 auto;
            margin-top: 1.5rem;
            margin-bottom: 1.063rem;"
          @click="openPlatformAgreement = false"
        >
          确定
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import new_info_v2_controller from "./new_info_v2_controller";
  export default new_info_v2_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  #new_info_v2 {
    text-align: left;

    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem;

      .cancel {
        line-height: 1.5rem;
        letter-spacing: 0;
        color: #aaaab3;
      }

      .title {
        line-height: 1.5rem;
        letter-spacing: 0;
        color: #3b3b4a;
      }

      .confirm {
        line-height: 1.5rem;
        letter-spacing: 0;
        color: #3b3b4a;
      }
    }

    .content {
      margin: 0.6rem;

      .bankCard {
        ::v-deep .van-cell__value {
          -webkit-flex: none;
        }
      }
    }

    .foot {
      position: fixed;
      bottom: 0;
      height: 3.125rem;
      background-color: #fff;
      padding: 0.46rem 1.53rem;
      box-shadow: -0.009rem -0.125rem 0.406rem 0 rgba(213, 213, 213, 0.59);
    }

    .city-info {
      border-radius: 0.656rem;
      width: 20rem;
      height: 32rem;
      margin: 0 auto;
      // padding-bottom: 5rem;
      background: #fff;

      header {
        border-radius: 0.656rem 0.656rem 0 0;
      }

      #a_content {
        // width: 14.438rem;
        margin: 0.5rem 0.9rem;
        height: 24rem;
        overflow-y: scroll;

        ::v-deep img {
          max-width: 100%;
          display: flex;
        }
      }
    }
  }

  ::v-deep .van-button--primary {
    width: 20.313rem;
    height: 2.188rem;
    background-color: var(--themeBaseColor);
    border: 1px solid var(--themeBaseColor);
    border-radius: 1.094rem;
  }

  ::v-deep .van-cell--clickable {
    border-radius: 0.313rem;
  }

  ::v-deep .van-cell {
    align-items: center;
  }

  ::v-deep [data-v-5c9a24d8] .van-cell {
    padding: 9px 6px;
  }

  ::v-deep .van-nav-bar__title {
    font-weight: 700;
    font-size: 14px;
    color: #666;
  }
</style>
